<template>
    <div class="search-list-item">
        <h4 @click="openLink" ref="title">{{data.title}}</h4>
        <div class="type-box">
            <slot name="tips">
                <span class="type">公开提案</span>
            </slot>
        </div>
        <h5>
            <slot name="time" v-bind:data="data">
                <span>来源：新华网</span>
                <span>2020-08-20 08:10:56</span>
            </slot>
        </h5>
        <a-row type="flex" :gutter="16">
            <a-col flex="0 1 170px" v-if="data.img">
                <img src="http://www.dataintell.com.cn/img/case_shanxi.58c6aafa.png" alt />
            </a-col>
            <a-col flex="1 1 200px">
                <p ref="content">
                    企业家是经济活动的重要主体。改革开放以来，一大批优秀企业家在市场竞争中迅速成长，一大批具有核心竞争力的企业不断涌现，为积累社会财富、创造就业岗位、促进经
                    济社会发展、增强综合国力作出了重要贡献，一大批优秀企业家在市场竞争中迅速成长，一大批具有核心竞争力的企业不断涌现，为积累社会财富。
                </p>
            </a-col>
        </a-row>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
    },
    methods: {
        openLink(){
            this.$emit('openLink',this.data)
        }
    },
    data() {
        return {};
    },
    watch: {},
    mounted() {
        this.$nextTick(() => {
            if (this.data.warn) {
                let regex = new RegExp(this.data.warn, "g");
                this.$refs.title.innerHTML = this.$refs.title.innerHTML.replace(
                    regex,
                    `<span style='color: #e53639;font-weight: bold;'>${this.data.warn}</span>`
                );
                this.$refs.content.innerHTML = this.$refs.content.innerHTML.replace(
                    regex,
                    `<span style='color: #e53639;font-weight: bold;'>${this.data.warn}</span>`
                );
            }
        });
    },
};
</script>

<style lang="stylus" scoped>
h4 {
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    cursor pointer
}

h5 {
    color: #656b90;
    font-size: 14px;

    span+span {
        margin-left: 44px;
    }
}

p {
    color: #575757;
    font-size: 15px;
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom 0px;
}

.type {
    color: #1eaef1;
    font-size: 12px;
    font-weight: bold;
}

.type-box {
    position: absolute;
    right: 0px;
    top: 30px;
}

.search-list-item {
    position: relative;
    border-bottom: 1px solid #ececec;
    padding-bottom: 28px;
    padding-top: 28px;
}
</style>